<template>
    <div>
        个人中心
    </div>
    
    <el-card>
        <el-row style="height:42px" >
            <el-col :span="2">
                <p>头像：</p>
            </el-col>
            <el-col :span="22">
                <el-row>
                    <el-col :span="1">
                        <img class="userHeader" :src="URLSHOW + uploadURL" alt="">
                    </el-col>
                    <el-col :span="2">
                        <el-upload class="avatar-uploader" :action="URL + '/upload/add'" :show-file-list="false"
                            @success="handleAvatarSuccess">
                            <span>更换头像</span>
                        </el-upload>
                    </el-col>
                </el-row>
            </el-col>

        </el-row>

        <el-row>
            <el-col :span="2">
                <p>姓名：</p>
            </el-col>
            <el-col :span="22">
                <span>{{ userInfo?.name }}</span>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="2">
                <p>手机号：</p>
            </el-col>
            <el-col :span="22">
                <span>{{ userInfo?.mobile }}</span>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="2">
                <p>账号：</p>
            </el-col>
            <el-col :span="22">
                <span>{{ userInfo?.username }}</span>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="2">
                <p>密码：</p>
            </el-col>
            <el-col :span="22">
                <span>********</span>
                <span @click="dialogVisible = true">修改密码</span>
            </el-col>
        </el-row>


        <!-- 修改密码弹窗 -->
        <el-dialog v-model="dialogVisible" title="修改密码" width="500">
            <el-form ref="formRef" :model="passwordForm" :rules="passwordRules" label-width="120px">
                <el-form-item label="输入旧密码" prop="oldPassword">
                    <el-input v-model="passwordForm.pwd" type="password" placeholder="请输入旧密码"></el-input>
                </el-form-item>
                <el-form-item label="输入新密码" prop="newPassword">
                    <el-input v-model="passwordForm.newPwd" type="password" placeholder="请输入新密码"></el-input>
                </el-form-item>
                <el-form-item label="再次输入新密码" prop="confirmPassword">
                    <el-input v-model="passwordForm.confirmPassword" type="password" placeholder="请再次输入新密码"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">关闭</el-button>
                    <el-button type="primary" @click="submitPasswordForm">提交</el-button>
                </span>
            </template>
        </el-dialog>


    </el-card>
</template>

<script setup lang='ts'>
import { getUserInfo, updateUserPhoto, updateUserPwd } from '@/apis/account/account';
import type { UserInfoData } from '@/apis/account/type';
import { doEncrypt } from '@/utils/cryptoUtil';
import { ElMessage } from 'element-plus';
import { ref, reactive } from 'vue';

let URL = import.meta.env.VITE_BASE_URL
let URLSHOW = import.meta.env.VITE_IMG_SHOW_URL

let uploadURL = ref<string>('')

let userInfo = ref<UserInfoData>()



const getUser = async () => {
    let res = await getUserInfo()
    console.log('账号登录信息', res);

    uploadURL.value = res.photo
    userInfo.value = res


}
getUser()



// 修改密码弹窗相关逻辑
const dialogVisible = ref(false);

const passwordForm = reactive({
    pwd: '',
    newPwd: '',
    confirmPassword: ''
});

interface CustomFormRule {
    [key: string]: any;
}
const passwordRules = {
    pwd: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
    newPwd: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
    confirmPassword: [
        { required: true, message: '请再次输入新密码', trigger: 'blur' },
        {
            validator: (rule: CustomFormRule, value: string, callback: (error?: Error) => void) => {
                if (value !== passwordForm.newPwd) {
                    callback(new Error('两次输入的新密码不一致'));
                } else {
                    callback();
                }
            },
            trigger: 'blur'
        }
    ]
};

const formRef = ref<any>(null);

const submitPasswordForm = () => {
    formRef.value.validate(async (valid: boolean) => {
        if (valid) {
            // 加密密码
            passwordForm.pwd = await doEncrypt(passwordForm.pwd);
            passwordForm.newPwd = await doEncrypt(passwordForm.newPwd);

            let res = updateUserPwd(passwordForm)
            console.log('修改密码', res);


        } else {
            console.log('error submit!!');
            return false;
        }
    });
};




// 换头像方法
const handleAvatarSuccess = (response: any) => {
    uploadURL.value = response.data.url;
    ElMessage.success('头像上传成功');
    updateUserInfo();
};
const updateUserInfo = async () => {
    try {
        let res = await updateUserPhoto({ photo: uploadURL.value });
        console.log('修改头像',res);
        
        uploadURL.value = res.photo

        ElMessage.success('用户信息更新成功');
    } catch (error) {
        ElMessage.error('用户信息更新失败');
    }
};
</script>

<style scoped lang='less'>
.userHeader {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}



.el-row{
    margin-bottom: 20px
}
</style>